<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>乐淘 - 后台管理系统首页</title>
    <!--bootstrap  原生样式-->
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <!--字体图标-->
    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
    <!--加载进度条-->
    <link rel="stylesheet" href="assets/nprogress/nprogress.css">
    <!--首页样式-->
    <link rel="stylesheet" href="less/index.css">
    <!--
        需要使用到table 插件，table 样式
    -->
    <link rel="stylesheet" href="less/bootstrap-table.css">
    <!--jQuery 插件.-->
    <script src="assets/jquery/jquery.min.js"></script>
    <style>
        .input_style_file_upload {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            display: inline;
            zoom: 1
        }

        .input_style_file_upload input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .input_style_file_upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }
    </style>
    <script>
        /*检测用户是否已经登录*/
        $.ajax({
            url: "/employee/checkRootLogin",
            type: "get",
            success: function (data) {
                // console.log(data);
                if (data.error == 400) {
                    //说明用户未登录
                    window.location.href = "login.html";
                }
            }
        })
    </script>
</head>

<body>
    <!-- 侧边栏 -->
    <div class="aside">
        <!--用户信息-->
        <div class="profile">
            <div class="avatar img-circle">
                <img src="images/my_logo.jpg">
            </div>
            <h4>张学友</h4>
        </div>
        <!-- 导航菜单 -->
        <div class="navs">
            <ul class="list-unstyled">
                <li><a href="index.html"><i class="fa fa-user"></i> 用户管理</a></li>
                <li>
                    <a href="javascript:;"><i class="fa fa-bars"></i>分类管理 <i class="fa fa-angle-right"></i></a>
                    <ul class="list-unstyled">
                        <li><a href="categoryFirst.html">一级分类管理</a></li>
                        <li><a href="categorySecond.html">二级分类管理</a></li>
                    </ul>
                </li>
                <li class="active"><a href="productList.html"><i class="fa fa-product-hunt"></i>商品管理</a></li>
            </ul>
        </div>
    </div>
    <!-- 主体 -->
    <div class="main">
        <div class="container-fluid">
            <!-- 头部 -->
            <div class="header">
                <nav class="navbar navbar-custom">
                    <div class="navbar-header">
                        <a href="javascript:;" class="navbar-brand">
                            <i class="fa fa-navicon"></i>
                        </a>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="javascript:;" class="login_out_bot" data-toggle="modal"
                                data-target=".bs-example-modal-sm">
                                <i class="fa fa-sign-out"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <!--
         这个区域指的是
         右边的部分，这部分我要显示用户信息.
        -->

            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">添加商品</h4>
                        </div>
                        <div class="modal-body">
                            <form action="" id="formProductId">
                                <div class="form-group">
                                    <div class="dropdown">
                                        请选择品牌
                                        <button class="btn btn-default dropdown-toggle" type="button"
                                            id="dropdownMenuBrandId" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="true">
                                            &nbsp; &nbsp; &nbsp; &nbsp;<span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" id="brandMenuId" aria-labelledby="dropdownMenu1">
                                        </ul>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="proName" name="proName" class="form-control"
                                        placeholder="请输入产品名称">
                                </div>
                                <div class="form-group">
                                    <input type="hidden" id="changePid">
                                </div>
                                <div class="form-group">
                                    <input type="text" id="proDesc" name="proDesc" class="form-control"
                                        placeholder="请输入产品描述">
                                </div>
                                <div class="form-group">
                                    <input type="text" id="num" name="num" class="form-control" placeholder="请输入产品数量">
                                </div>
                                <div class="form-group">
                                    <input type="text" id="size" name="size" class="form-control"
                                        placeholder="请输入产品尺码,如20-39">
                                </div>
                                <div class="form-group">
                                    <input type="text" id="oldPrice" name="oldPrice" class="form-control"
                                        placeholder="请输入商品原价">
                                </div>
                                <div class="form-group">
                                    <input type="text" id="price" name="price" class="form-control"
                                        placeholder="请输入商品折扣价">
                                </div>
                                <!--这个区域保存的是文件上传的内容.-->
                                <div class="form-group">
                                    <a href="javascript:;" class="input_style_file_upload">
                                        请选择需要上传的图片
                                        <input type="file" id="productIdFileUpload" accept="image/jpeg" name="pic1"
                                            data-url="/product/addProductPic" multiple>
                                    </a>
                                    ** 请选择三张图片
                                </div>
                                <div id="picId" style="overflow: hidden;">

                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn_product_close"
                                data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary productSaveId">保存商品</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="body teacher-profile">
                <div class="profile">
                    <div class="chart">
                        <a href="#" class="btn btn-primary" id="changeProductId" data-toggle="modal"
                            data-target="#myModal">添加商品</a>
                        <div id="main">
                            <table id="productId"></table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!--bootstrap 核心文件-->
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <!--加载绿色进度条-->
    <script src="assets/nprogress/nprogress.js"></script>
    <!--加载绿色进度条的使用-->
    <script src="js/common.js"></script>
    <!--table 插件的核心文件-->
    <script src="js/bootstrap-table.js"></script>
    <!--国际化文件，中文.-->
    <script src="js/bootstrap-table-zh-CN.js"></script>

    <!--文件上传需要依赖的文件-->
    <script src="assets/jquery-fileupload/jquery.ui.widget.js"></script>
    <script src="assets/jquery-fileupload/jquery.iframe-transport.js"></script>
    <script src="assets/jquery-fileupload/jquery.fileupload.js"></script>


    <script>

        $(function () {


            //默认是false
            var changeWindow = false;



            var brandId = "";
            //用来保存文件上传的时候后台返回的图片.
            var picArray = new Array();
            $("#productId").bootstrapTable({
                url: "/product/queryProductDetailList",
                method: "get",
                pageList: [10],
                cache: false,
                //是否使用分页.
                pagination: true,
                //是否可以排序
                //开启服务端分页.
                sidePagination: "server",
                sortable: false,
                //在发送请求之前，会调用这个函数，
                //可以在这个函数里面组装自己想要的参数
                //发送给服务器.
                height: 'auto',                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                cardView: false,                    //是否显示详细视图
                detailView: false,
                singleSelect: true,
                queryParams: function (params) {
                    console.log(params);
                    params.page = params.offset / 10 + 1;
                    params.pageSize = 10;
                    return params;
                },
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: '商品编号'
                }, {
                    field: 'proName',
                    title: '商品名称'
                }, {
                    field: 'proDesc',
                    title: '商品描述'
                }, {
                    field: 'num',
                    title: '商品库存'
                }, {
                    field: 'size',
                    title: '商品尺寸'
                }, {
                    field: 'statu',
                    title: '是否下架'
                }, {
                    field: 'operation',
                    title: '操作'
                }],
                //在每一行数据渲染之前，会调用这个方法。
                rowStyle: function (row, index) {
                    console.log(row);
                    if (row.statu == 1) {
                        row.statu = "已上架商品";
                        row.operation = "<a href='#' class='btn btn-danger'>下架</a>";

                    } else if (row.statu == 0) {
                        row.statu = "<font color='red'>已下架商品</font>";
                        row.operation = "<a href='#' class='btn btn-primary'>上架</a>";
                    }
                    return row;
                },
                onDblClickRow: function (row, index) {
                    changeWindow = true;
                    //$(".productSaveId").html("更改商品");
                    //双击某一行的时候触发
                    //alert("双击");
                    //调用api 弹窗口。
                    //窗口里面准备表单
                    //表单里面要回显数据.
                    //拿到这一行的数据进行回显
                    //console.log(row);,
                    //当前行的数据，在这个位置.
                    //console.log(row);
                    //模态框，回显信息.
                    //点击添加商品之后，弹出一个窗口
                    //点击弹出窗口的保存商品，调用的是添加商品的接口
                    //双击某一个行，弹出一个窗口
                    //点击弹出的这个窗口的保存商品，调用的是修改商品的接口.
                    //获取到修改的商品的id
                    var id = row.id;
                    $("#changePid").val(id);
                    //填充数据.
                    $("#proName").val(row.proName);
                    $("#proDesc").val(row.proDesc);
                    $("#num").val(row.num);
                    $("#size").val(row.size);
                    $("#oldPrice").val(row.oldPrice);
                    $("#price").val(row.price);
                    $("#changeProductId").click();
                    //获取当前元素的品牌的id
                    brandId = row.brandId;
                    var bId = row.brandId;
                    //获取到下拉菜单，下拉菜单里面有品牌
                    var text = $("#brandMenuId").find("#" + bId).children().text();
                    //console.log($("#brandMenuId").find("#" + bId).children().text());
                    $("#dropdownMenuBrandId").html('<span class="caret"></span>');
                    $("#dropdownMenuBrandId").prepend(text);
                },
                onClickCell: function (field, value, row, $element) {
                    //alert(value);
                    //console.log(this);
                    //$element.html("<input type='text' class='form-control' value='"+value+"'>");
                }
            });
            $.ajax({
                url: "/category/querySecondCategoryPaging",
                type: "get",
                data: {
                    page: 1,
                    pageSize: 50
                },
                success: function (data) {
                    var rows = data.rows;
                    for (var i = 0; i < rows.length; i++) {
                        var brandName = rows[i].brandName;
                        var brandId = rows[i].id;
                        var li = "<li id='" + brandId + "'><a href='#'>" + brandName + "</a></li>";
                        $("#brandMenuId").append(li);
                    }
                }
            });
            //点击一下，选中品牌.我在这里，可以获取到品牌的名称.但是id 获取不到.
            $("#brandMenuId").on("click", "li", function () {
                var text = $(this).children().text();
                $("#dropdownMenuBrandId").html('<span class="caret"></span>');
                //往当前元素的内部的前面追加元素.
                $("#dropdownMenuBrandId").prepend(text);
                brandId = this.id;
            });

            $('#productIdFileUpload').fileupload({
                dataType: 'json',
                //后台处理了之后会给我一个响应，响应的是 图片的地址
                done: function (e, data) {
                    //响应回来的数据被fileupload
                    //方法包装在data 里面.
                    var pic = data._response.result;
                    //pic={"picName":"","picAddr":""}
                    picArray.push(pic);
                    //在这个地方可以得到后台的图片的名称，图片的地址.
                    var img = "<img src='" + pic.picAddr + "' style='width:100px;height:100px;float: left;'>"
                    $("#picId").append(img);
                }
            });



            $(".productSaveId").on("click", function () {



                var pid = $("#changePid").val();

                var params = $("#formProductId").serialize();
                params = params + "&brandId=" + brandId + "&statu=1";
                params = params + "&picName1=" + picArray[0].picName + "&picAddr1=" + picArray[0].picAddr;
                params = params + "&picName2=" + picArray[1].picName + "&picAddr2=" + picArray[1].picAddr;
                params = params + "&picName3=" + picArray[2].picName + "&picAddr3=" + picArray[2].picAddr;
                params = params + "&id=" + pid;


                //alert(params);


                //在这里进行判断。
                //我是要调用添加的，还是要调用修改的.
                //需要添加条件.


                if (changeWindow) {
                    //修改
                    //调用修改的..
                    //alert("调用修改的接口");
                    $.ajax({
                        url: "/product/updateProduct",
                        type: "post",
                        data: params,
                        success: function (data) {
                            console.log(data);
                            if (data.success) {
                                $(".btn_product_close").click();
                                $("#productId").bootstrapTable("refresh");
                            }
                        }
                    })
                    changeWindow = false;

                } else {
                    //添加
                    //保存商品.
                    $.ajax({
                        url: "/product/addProduct",
                        type: "post",
                        data: params,
                        success: function (data) {
                            //console.log(data);
                            if (data.success) {
                                $(".btn_product_close").click();
                                $("#productId").bootstrapTable("refresh");
                            }
                        }
                    })

                }




            });

        })
    </script>
</body>

</html>